<template>
  <div class="theme-container">
    <side-bar :menuName="menuName" :menuInfo="menuInfo" @nameEvent="nameEvent" @collapsedEvent="collapsedEvent" />
    <!-- 二级菜单内容 -->
    <el-main class="main">
      <el-breadcrumb :class="collapsed ? 'breadcrumb-right' : 'breadcrumb'" class="breadcrumb" separator="/">
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        <el-breadcrumb-item>{{ curMenu }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div :class="collapsed ? 'main-container-right' : 'main-container'">
        <router-view></router-view>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import sideBar from '@/components/sideBar.vue'


const menuName = ref('report')
// 告警概览菜单
const menuInfo = ref([
  {
    name: '报表分析',
    component: 'reportAnalysis'
  },
  {
    name: '报表模板',
    component: 'reportTemp'
  }
])
// 当前二级菜单名称
const curMenu = ref(menuInfo.value[0].name)
// 是否展开侧边栏
const collapsed = ref(false)

const nameEvent = (name) => {
  curMenu.value = name;
}

const collapsedEvent = (status) => {
  collapsed.value = status;
}
 
</script>

<style scoped>
.theme-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.main {
  height: 100%;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  padding: 0;
  flex: 1;
}

.breadcrumb {
  height: 28px;
  line-height: 28px;
  position: absolute;
  left: 178px;
  top: 6px;
  z-index: 11;
}
.breadcrumb-right {
  height: 28px;
  line-height: 28px;
  position: absolute;
  left: 40px;
  top: 3px;
  z-index: 11;
}

.main-container {
  margin-top: 38px;
  height: calc(100% - 46px);
  width: 100%;
  border: 3px solid green;
}
.main-container-right {
  margin-top: 38px;
  height: calc(100% - 46px);
  width: 100%;
  border: 3px solid green;
}
</style>
